<template>
    <div class="container">
        <!-- 中转页面 -->
        <el-row :gutter="20" v-for="item in Math.ceil(menuList.length / 3)">
            <el-col :span="8" v-for="ele in menuList.slice((item - 1) * 3, item * 3)">
                <el-card @click="jump(ele.url)">
                    <div>{{ ele.name }}</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const menuList = [
    {
        name: '待办',
        url: '/todo'
    },
    {
        name: '阅读',
        url: '/read'
    },
    {
        name: '取色器',
        url: '/color'
    },
    {
        name: '截图',
        url: '/screenShort'
    },
    {
        name: '联机',
        url: '/online'
    },
    {
        name: '笔记',
        url: '/notes'
    },
    {
        name: '音乐',
        url: '/music'
    },
    {
        name: '测量',
        url: '/measure'
    },
    {
        name: '录屏',
        url: '/screenRecorder'
    },
    {
        name: '翻译',
        url: '/translate'
    },
    {
        name: '图识字',
        url: '/getWords'
    }

]
onMounted(() => {
    // window.electron.ipcRenderer.send('getConfig', JSON.stringify({}))
    // window.electron.ipcRenderer.on('config', (event, arg) => {
    //     let obj = JSON.parse(arg);
    //     router.push(obj.mode.url)
    // });

})
const jump = (url) => {
    window.electron.ipcRenderer.send('updateContextMenu', url)
    router.push(url)
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 10px;
    opacity: 0.8;
    overflow: scroll;
		// 隐藏滚动条，考虑兼容
		scrollbar-width: none;
		/* Firefox */
		-ms-overflow-style: none;

    .el-row {
        margin-bottom: 20px;
    }

    .el-card {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        background-color: #333;
        color: #fff;
        -webkit-app-region: no-drag;

        &:hover {
            background-color: #fff;
            color: #333;
            border: 1px solid #333;
            transition: 0.3s;
        }
    }
}
</style>